<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>vue学习</title>
    </head>
    <body>

        <!-- v-text="once" v-once -->
        <div id="app">
            <h3 v-text="once" v-once>{{message}}</h3>
           用户名： <label>
            <input type="text" name="name" v-model="name"/>
        </label>
        </div>

        <!-- v-bind:title:将这个元素节点的 title attribute 和
                            Vue 实例的 message property 保持一致
         -->
        <div id="app-2">
            <span v-bind:title="message">
                鼠标悬停几秒钟查看此处动态绑定的提示信息！
            </span>
        </div>

        <div id="app-3">
            <p v-if="seen">现在你看见我了</p>
        </div>

        <div id="app-4">
            <ol>
                <li v-for="todo in todos">
                    {{ todo.text }}
                </li>
            </ol>
        </div>

        <div id="app-5">
            <p>{{ message }}</p>
            <button v-on:click="reverseMessage">反转消息</button>
        </div>

        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el : "#app",
                data : {
                    message: "hello vue.js",
                    once:"1111111",
                    name: "admin"
                }
            })

            const app2 = new Vue({
                el: '#app-2',
                data: {
                    message: '页面加载于 ' + new Date().toLocaleString()
                }
            })

            const app3 = new Vue({
                el: "#app-3",
                data:{
                    seen: true
                }
            })

            const app4 = new Vue({
                el:"#app-4",
                data:{
                    todos:[
                        {text:"学习 js"},
                        {text:"学习 java"},
                        {text:"学习 vue"}
                    ]
                }
            })

            const app5 = new Vue({
                el: '#app-5',
                data: {
                    message: 'Hello Vue.js!'
                },
                methods: {
                    reverseMessage: function () {
                        this.message = this.message.split('').reverse().join('')
                    }
                }
            })


        </script>

    </body>
</html>